"use client"
import { useState } from 'react';
import Content from '@/app/clients/page'
import styles from './page.module.scss'
import cx from 'classnames';
import { productNav } from '@/utils/dictionary'
import Modal from './components/Modal'

export default function NewsCenter() {
  const [type, setType] = useState('basketball')
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [productInfo, setProductInfo] = useState({});
  return (
    <Content>
      <div className={styles['product-display']}>
        <img src="/imgs/clients/4-1.jpg" alt="" width='100%' />
        <div className={cx(styles['section'], styles['bancen'])}>
          <div className={styles['left']}>
            <div className={cx(styles['li'])}>
              产品分类
            </div>
            {productNav.map(item => <div key={item.path} className={cx(styles[type === item.path ? 'active' : ''], styles['li'])} onClick={() => setType(item.path)}>{item.name}</div>)}
          </div>
          <div className={styles['right']}>
            <div className={styles['title']}>
              <span>产品展示</span>
              <span>PRODUCT</span>
              <span></span>
              <span></span>
            </div>
            <div className={styles['imgs']}>
              {['铅酸蓄电池', '铅酸蓄电池', '铅酸蓄电池', '镍镉蓄电池', '镍氢蓄电池', '锂离子蓄电池'].map((v, i) => <div className={styles["item"]} key={i} onClick={() => {
                setProductInfo({ id: i, name: v})
                setIsModalOpen(true)
              }}>
                <img src="/imgs/clients/3-2.jpg" alt="" />
                <span>{v}</span>
              </div>)}
            </div>
          </div>
        </div>
      </div>
      <Modal isModalOpen={isModalOpen} setIsModalOpen={setIsModalOpen} productInfo={productInfo}></Modal>
    </Content>
  );
}
